<!-- 热映和待映公共代码的地方
    1. 骨架屏
    2. 请求
 -->
<template>
  <div class="mv-body">
    <section class="skeleton" v-if="isLoading">
      <van-skeleton v-for="v in 10" :key="v" title :row="3" />
    </section>

    <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <slot :list="list"></slot>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { Skeleton, List, PullRefresh } from "vant";
import axios from "@/api/instance";
Vue.use(Skeleton);
Vue.use(List);
Vue.use(PullRefresh);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  // 通过 props 接受父组件传入的值
  props: ["type"],
  data() {
    //这里存放数据
    return {
      isLoading: true, // 表示数据正在加载中
      list: [], //列表的数据
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    cityName: function () {
      return localStorage.getItem("cityName") || "广州";
    },
    cityId: function () {
      return localStorage.getItem("cityId") || 20;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 列表下拉刷新的时候
    onRefresh: function () {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将loading 设置为true, 表示处理加载状态
      this.loading = true;
      this.onLoad(); //
    },
    // 列表触底加载下一条数据的时候
    onLoad: async function () {
      console.log("加载下一页的数据");
      // 如果现在是下拉刷新， refreshing 为真
      if (this.refreshing) {
        this.list = []; // 清空原来列表
        this.offset = 0; // 从第0条开始从新加载数据
        this.refreshing = false;
      } else {
        // 触底 加载下一页 添加偏移量
        this.offset += this.limit;
      }
      await this.loadData(); // 重新加载数据
      this.loading = false; // 设置加载的状态位为false
    },
    /* 用来加载列表需要的数据 */
    async loadData() {
      console.log("加载列表的数据");
      // 请求逻辑还未编写
      // 获取当前请求的url
      let url =
        this.type === "hot"
          ? "/mmdb/movie/v2/list/hot.json"
          : "/mmdb/movie/v1/list/wish/order/coming.json";
      // console.log(url);
      // 获取请求参数
      let { limit, offset, cityName, cityId } = this;
      // console.log(limit, offset, cityName, cityId);
      // 获取数据
      let result = await axios.get(url, {
        params: {
          // limit:limit
          limit,
          offset,
          ct: cityName,
          ci: cityId,
        },
      });
      // 判断是否还有下一页数据
      let hasMore = result?.data?.paging?.hasMore; // false
      this.finished = !hasMore; // 有更多和完成，两者之间是一个互斥关系
      // console.log('result:', result);
      // 根据 type 不同，获取列表的数据
      let source = this.type === "hot" ? result.data.hot : result.data.coming;
      // console.log('获取到的列表数据,', list);
      // 追加 列表的逻辑
      this.list = [...this.list, ...source];
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    console.log(this.type);
    // 设置请求参数
    this.limit = 10;
    this.offset = 0;
    await this.loadData();
    // 数据已经加载回来，把骨架屏状态位设置成 false
    this.isLoading = false;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.mv-body {
  margin-top: 0.1rem;
}
</style>
